let form = layui.form;
let layer = layui.layer;

let $image = $(".container img");

// 1.2 配置选项
let options = {
  // 纵横比
  aspectRatio: 1,
  preview: ".preview",
};



// 1.3 创建裁剪区域
$image.cropper(options);


//给上传注册点击事件
$(`#btnChooseImage`).on(`click`,function () {
  //模拟点击
  $(`#file`).click()
})


//给文件域注册change事件
$(`#file`).on(`change`,function () {
  //得到图片
  const file=this.files[0]
  //
  if (!file) {
    return layer.msg(`请选择文件`)
  }
  //得到图片地址
  const  newSrc=URL.createObjectURL(file)

  $image
  .cropper('destroy')      // 销毁旧的裁剪区域
  .attr('src', newSrc)  // 重新设置图片路径
  .cropper(options)        // 重新初始化裁剪区域
})


// ============上传图像64进制=================
$(`#btnCreateAvatar`).on(`click`,function () {
  let base64Str = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
    width: 100,
    height: 100
  })
  // 把图片转成base64格式
let dataURL = base64Str.toDataURL('image/png'); // 把canvas图片转成base64格式的字符串
console.log(dataURL);

axios.post(`/my/update/avatar`,`avatar=${encodeURIComponent(dataURL)}`).then(({data:{status,message}})=>{
  if (status!==0) {
    return layer.msg(message)
  }
  layer.msg(message)
  window.parent.getUserInfo()
})
})